<!-- 一个单文件组件后缀为.vue
     分为三部分：
     模板 html <template>
     样式 css  <style>
     逻辑 js   <script>
     -->

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->

    <el-container>
      <!-- <h1 style="text-align: left;top: 0px;height: 0px;">系统</h1> -->
      <el-header style="text-align: left;background-color: #545c64;" text-color="#fff">

        <span style="float: left;position: relative;top: 5px; color: #FFFFFF;font-size: 35px;">
          物流管理系统
        </span>&emsp;

        <!-- <el-button :icon="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"
        style="font-size: 30px;background-color: #545c64;color: #ffd04b;"
        @click="handleOpen"></el-button> -->

        <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"
        :title="isCollapse?'收起侧边栏':'展开侧边栏'"
        style="font-size: 30px;background-color: #545c64;color: #ffd04b;position: absolute;top: 27px;"
        @click="handleOpen"></i>

           <!-- <el-dropdown>
             <i class="el-icon-setting" style="position: relative;left: 600px;"></i>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item>查看</el-dropdown-item>
               <el-dropdown-item>新增</el-dropdown-item>
               <el-dropdown-item>删除</el-dropdown-item>

             </el-dropdown-menu>
           </el-dropdown> -->
        <span
        style="float: left;position: absolute;top: 27px;right: 140px; color: #FFFFFF;font-size: 15px;">
        欢迎使用本系统#{这里到时候放用户名！！！}
        </span>&emsp;

        <el-button
        style="float: left;position: absolute;top: 18px;right: 60px; color: #FFFFFF;font-size: 15px;font-weight: 1200;"
        type="text"
        @click="quit"
        >退出</el-button>

           <!-- <el-switch

             v-model="isCollapse"
             active-text="展开"
             inactive-text="收起">
           </el-switch> -->
      </el-header>

    <el-container>

    <el-aside :width="isCollapse?'205px':'60px'" style="background-color: #545c64;">
      <!-- <div>
        <el-menu :default-openeds="['1', '3']" >
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">
                <router-link to="/">首页</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">

              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>导航三</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </div> -->
      <div>
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <!-- <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button> -->

        </el-radio-group>
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo"
        :collapse="!isCollapse"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">首页</span>
            </template>
            <el-menu-item-group>
              <!-- <span slot="title">分组一</span> -->
              <el-menu-item index="1-1">
                <slot>
                  <router-link to="/order">订单管理</router-link>
                </slot>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/task">任务单管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-3">
                <router-link to="/entryQuery">购货入库</router-link>
              </el-menu-item>
              <el-menu-item index="1-4">
                <router-link to="/outWarehouse">调拨出库</router-link>
              </el-menu-item>
              <el-menu-item index="1-5">
                <router-link to="/outBill">出货单</router-link>
              </el-menu-item>
              <el-menu-item index="1-6">
                <router-link to="/distributeBill">分发单</router-link>
              </el-menu-item>
              <el-menu-item index="1-9">
                <router-link to="/businessDevelopment">业务开发</router-link>
              </el-menu-item>
              <el-menu-item index="1-10">
                <router-link to="/supplierManage">供货商管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-12">
                <router-link to="/warehouseManage">库房管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-13">
                <router-link to="/cargoSort">分类管理</router-link>
              </el-menu-item>

            </el-menu-item-group>
<!--             <el-menu-item-group title="分组2">-->
            <el-menu-item index="1-14">
              <router-link to="/customer">客户管理</router-link>
            </el-menu-item>
<!--             </el-menu-item-group>-->
            <el-menu-item index="1-15">
              <router-link to="/workRecord">工作量查询</router-link>
            </el-menu-item>
          </el-submenu>


          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">分站</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">
                <router-link to="/delivery_person">配送员界面</router-link>
              </el-menu-item>
              <el-menu-item index="2-2">
                <router-link to="/taskinfz">任务单管理</router-link>
              </el-menu-item>
              <el-menu-item index="2-3">
                <router-link to="/delivery_order">配送单管理</router-link>
              </el-menu-item>
              <el-menu-item index="2-4">
                <router-link to="/payment">缴款管理</router-link>
              </el-menu-item>
              <el-menu-item index="2-5">
                <router-link to="/invoice">发票管理</router-link>
              </el-menu-item>
            </el-menu-item-group>
            <!-- <el-menu-item-group title="分组2"> -->
              <el-menu-item index="1-3">选项3</el-menu-item>

            <el-submenu index="1-4">
              <span slot="title">选项4</span>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>

      </div>
    </el-aside>


    <!-- <router-link to="/stu">学生管理</router-link> -->

    <router-view/>

    </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',//组件名称
  data(){
     return{
       isCollapse: false
     };
  },
  methods:{
    handleOpen() {
      this.isCollapse = !this.isCollapse;
    },
    quit(){
      alert("已登出");
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

}

.aside_po {
    position: inherit;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
}

 .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  a {
    color: #ffffff;
    text-decoration: none;
  }

 a.router-link-active {
    color: #ffd04b;
  }

</style>
